<template>
  <div class="echart2" id="mychart2" :style="myChartStyle2"></div>
</template>

<script>
  import * as echarts2 from "echarts";

  export default {
    data() {
      return {
        xData: ["一月", "二月", "三月", "四月", "五月", "六月"], //横坐标
        yData: [23, 24, 18, 25, 27, 28, 25], //人数数据
        taskDate: [10, 11, 9, 17, 14, 13, 14],
        myChartStyle2: { float: "left", width: "100%", height: "400px",marginTop: "50px" } //图表样式
      };
    },
    mounted() {
      this.initEcharts();
    },
    methods: {
      initEcharts() {
        // 多列柱状图
        const mulColumnZZTData = {
          xAxis: {
            data: this.xData
          },
          title:{
            text:"会员增长情况表",
            left:"center"
          },
          // 图例
          legend: {
            data: ["lv.1", "lv.2", "lv.3", "lv.4", "lv.5", "lv.6", "lv.7", "lv.8"],
            top: "94%",
            orient: 'horizontal',
            y: 'bottom',     //可设定图例在上、下、居中
            padding: [0, 50, 0, 0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
          },
          yAxis: {},
          series: [
            {
              type: "bar", //形状为柱状图
              data: this.yData,
              name: "lv.1", // legend属性
              color:"dodgerblue",
              label: {
                // 柱状图上方文本标签，默认展示数值信息
                position: "top"
              }
            },
            {
              type: "bar", //形状为柱状图
              data: this.taskDate,
              name: "lv.2", // legend属性
              color:"coral",
              label: {
                // 柱状图上方文本标签，默认展示数值信息
                position: "top"
              }
            },
            {
              type: "bar", //形状为柱状图
              data: [40,30,33,25,41,36,30],
              name: "lv.3", // legend属性
              color:"#ccc",
              label: {
                // 柱状图上方文本标签，默认展示数值信息
                position: "top"
              }
            },
            {
              type: "bar", //形状为柱状图
              data: [32,11,24,25,37,41,15],
              name: "lv.4", // legend属性
              color:"goldenrod",
              label: {
                // 柱状图上方文本标签，默认展示数值信息
                position: "top"
              }
            },
            {
              type: "bar", //形状为柱状图
              data: [20,16,24,25,30,34,18],
              name: "lv.5", // legend属性
              color:'royalblue',
              label: {
                // 柱状图上方文本标签，默认展示数值信息
                position: "top"
              }
            },
            {
              type: "bar", //形状为柱状图
              data: [24,18,28,22,20,11,19],
              name: "lv.6", // legend属性
              color:'green',
              label: {
                // 柱状图上方文本标签，默认展示数值信息
                position: "top"
              }
            },
            {
              type: "bar", //形状为柱状图
              data: [12,24,28,20,14,15,34],
              name: "lv.7", // legend属性
              color:"darkblue",
              label: {
                // 柱状图上方文本标签，默认展示数值信息
                position: "top"
              }
            },
            {
              type: "bar", //形状为柱状图
              data: [41,18,40,36,29,19,28],
              name: "lv.8", // legend属性
              color:"saddlebrown",
              label: {
                // 柱状图上方文本标签，默认展示数值信息
                position: "top"
              }
            }
          ]
        };
        const myChart = echarts2.init(document.getElementById("mychart2"));
        myChart.setOption(mulColumnZZTData);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      }
    }
  };
</script>
<style scoped>
body{
  color: saddlebrown;
}
</style>